<template>
    <div class="login">
        <div class="container">
            <p>{{ title }}</p>
            <div class="login_from">
                <div>用户登录</div>
                <el-input class="user_name" v-model="userName" placeholder="请输入登录ID"></el-input>
                <el-input class="pass_word mt20" type="password" v-model="passWord" placeholder="请输入密码"></el-input> 
                <div v-show="showTips" class="tips">* 请输入正确的登录ID和密码</div>
                <el-button class="login_btn" @click="login">登 录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: '盐碱地监测大数据平台',
            userName: "",
            passWord: "",
            showTips: false
        } 
    },
    methods: {
        login() {
            let _this = this;
            if(_this.userName === "admin" || _this.passWord === "adminyjdgc"){
                _this.$router.push('/');
            }else{
                _this.showTips = true;
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.login {
    height: 100vh;
    width: 100vw; 
    background: url("~@static/img/login_bg.png") no-repeat 0 0/100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding-bottom: 20px;
        p{
            color: #00e1eb;
            font-size: 42px;
            width: 100%;
            text-align: center;
            margin-bottom: 40px;
        }
        .login_from{
            width: 448px;
            height: 310px; 
            background: url("~@static/img/login_form.png") no-repeat 0 0/100% 100%;
            padding: 30px 40px;
            box-sizing: border-box;
            position: relative;
            >div:nth-child(1){
                color: #00e1eb;
                font-size: 22px;
                text-align: center;
                margin-bottom: 20px;
            }
            .user_name{
                background: url("~@static/img/用户.png") no-repeat 10px center/16px 16px;
            }
            .pass_word{
                background: url("~@static/img/密码.png") no-repeat 10px center/16px 16px;
            }
            /deep/ .el-input__inner{
                background: url("~@static/img/login_input.png") no-repeat 0 0/100% 100% !important;
                border: none !important; 
                color: #fff !important;
                letter-spacing: 1px;
                padding-left: 40px;
            }

            .login_btn{
                width: calc(100% - 80px);
                height: 40px;
                background: #00e1eb;
                color: #000;
                border: none !important; 
                font-size: 20px; 
                position: absolute;
                bottom: 50px;
                left: 40px;
            }

            .tips{
                color: #F56C6C;
                font-size: 14px; 
                position: absolute;
                bottom: 100px;
                // margin: 16px 0;
            }
        }
    }
    .mt20{
        margin-top: 20px;
    }
}
</style>